<template>
    <div>
        <yh-dialog
            title="选择条目组"
            :visible.sync="transDialog"
            width="700px"
            :close-on-click-modal="false"
            @close="closeDialog"
            :before-close="closeDialog"
            drag
        >
            <el-row>
                <el-col :span="11">
                    <div>
                        <el-table
                            ref="leftTable"
                            :data="dataSourceLeft"
                            tooltip-effect="dark"
                            style="width: 100%"
                            height="400px"
                            row-key="groupCode"
                            border
                            @selection-change="handleSelectionChange($event, 'rowSelectionLeft')"
                        >
                            <el-table-column type="selection" width="40" align="center"></el-table-column>
                            <el-table-column
                                v-for="col in tranColumns"
                                :key="col.prop"
                                :prop="col.prop"
                                :label="col.label"
                                :width="col.width"
                                show-overflow-tooltip
                            ></el-table-column>
                        </el-table>
                    </div>
                </el-col>
                <el-col :span="2">
                    <div class="trant-but">
                        <el-button
                            type="primary"
                            :disabled="!selectKeyLeft.length"
                            icon="el-icon-arrow-right"
                            size="mini"
                            @click="handleMoveToData('LTCR')"
                        ></el-button>
                        <br />
                        <el-button
                            type="primary"
                            icon="el-icon-arrow-left"
                            size="mini"
                            :disabled="!selectKeyCalculateRight.length"
                            @click="handleMoveToData('CRTL')"
                        ></el-button>
                    </div>
                    <div>
                        <el-button
                            type="primary"
                            icon="el-icon-arrow-right"
                            size="mini"
                            :disabled="!selectKeyLeft.length"
                            @click="handleMoveToData('LTER')"
                        ></el-button>
                        <br />
                        <el-button
                            type="primary"
                            icon="el-icon-arrow-left"
                            size="mini"
                            :disabled="!selectKeyExcludeRight.length"
                            @click="handleMoveToData('ERTL')"
                        ></el-button>
                    </div>
                </el-col>
                <el-col :span="11">
                    <div>
                        <h3>计算以下条目组：</h3>
                        <el-table
                            ref="rightTable1"
                            :data="dataSourceCalculateRight"
                            @selection-change="handleSelectionChange($event, 'rowSelectionCalculateRight')"
                            tooltip-effect="dark"
                            style="width: 100%"
                            height="180px"
                            row-key="groupCode"
                            border
                        >
                            <el-table-column type="selection" width="40" align="center"></el-table-column>
                            <el-table-column
                                v-for="col in tranColumns"
                                :key="col.prop"
                                :prop="col.prop"
                                :label="col.label"
                                :width="col.width"
                                show-overflow-tooltip
                            ></el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <h3>排除以下条目组：</h3>

                        <el-table
                            ref="rightTable2"
                            :data="dataSourceExcludeRight"
                            @selection-change="handleSelectionChange($event, 'rowSelectionExcludeRight')"
                            tooltip-effect="dark"
                            style="width: 100%"
                            height="180px"
                            row-key="groupCode"
                            border
                        >
                            <el-table-column type="selection" width="40" align="center"></el-table-column>
                            <el-table-column
                                v-for="col in tranColumns"
                                :key="col.prop"
                                :prop="col.prop"
                                :label="col.label"
                                :width="col.width"
                                show-overflow-tooltip
                            ></el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="closeDialog"> 取 消 </el-button>
                <el-button size="mini" type="primary" @click="handleEntrySubmit"> 确 定 </el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import XEUtils from 'xe-utils';
@Component({
    name: 'EntryGroupSetting',
})
export default class EntryGroupSetting extends Vue {
    @Prop()
    transDialog: boolean;
    @Prop()
    resourceCode: string;
    // 模块详情穿梭框数据
    tranColumns: any[] = [
        {
            label: '编号',
            prop: 'groupCode',
            width: 80,
        },
        {
            label: '名称',
            prop: 'groupName',
        },
    ];

    dataSourceLeft: any[] = [];
    dataSourceCalculateRight: any[] = [];
    dataSourceExcludeRight: any[] = [];
    selectKeyLeft: any[] = []; // 左边选中的key
    selectKeyCalculateRight: any[] = []; // 右边选中的key
    selectKeyExcludeRight: any[] = []; // 右边选中排除的key
    entryGroups: any[] = [];

    selectEntryGroupCode = {
        calculateEntryGroup: [],
        excludeEntryGroup: [],
    };

    async mounted() {
        await this.getEntryGroupList();
        this.getUserSelectEntryGroupList();
    }

    getUserSelectEntryGroupList() {
        this.$axios.get('/entry/group/user/select/list/' + this.resourceCode || '2').then((res: any) => {
            res = res || [];
            this.selectEntryGroupCode = {
                calculateEntryGroup: res.filter(item => item.instGroupType === '1' && item.groupCode !== 'DEFAULT').map(item => item.groupCode),
                excludeEntryGroup: res.filter(item => item.instGroupType === '2' && item.groupCode !== 'DEFAULT').map(item => item.groupCode),
            };
            this.$emit('getEntryGroup', this.selectEntryGroupCode);
            this.initData(this.selectEntryGroupCode);
        });
    }

    async getEntryGroupList() {
        await this.$axios.get('/entry/group/list').then((res: any) => {
            this.entryGroups = res.map(item => {
                return {
                    key: item.groupCode,
                    groupCode: item.groupCode,
                    groupName: item.groupName,
                };
            });
            this.entryGroups = this.entryGroups.filter(item => {
                return item.groupCode !== 'DEFAULT';
            });
        });
    }

    // 数据初始化
    initData(selectEntryGroupCode) {
        let entryGroups = this.entryGroups;
        let calculateEntryGroup = (selectEntryGroupCode || []).calculateEntryGroup;
        let excludeEntryGroup = (selectEntryGroupCode || []).excludeEntryGroup;
        this.dataSourceLeft = entryGroups.filter(
            item => !calculateEntryGroup.includes(item.groupCode) && !excludeEntryGroup.includes(item.groupCode)
        );
        this.dataSourceCalculateRight = entryGroups.filter(item => calculateEntryGroup.includes(item.groupCode));
        this.dataSourceExcludeRight = entryGroups.filter(item => excludeEntryGroup.includes(item.groupCode));
    }

    // handleSelectionLeftChange(val: any) {
    //     this.selectKeyLeft = [];
    //     val.forEach((ele) => {
    //         this.selectKeyLeft.push(ele.groupCode);
    //     });
    // }

    // handleSelectionrightChange1(val: any) {
    //     this.selectKeyCalculateRight = [];
    //     val.forEach((ele) => {
    //         this.selectKeyCalculateRight.push(ele.groupCode);
    //     });
    // }

    // handleSelectionrightChange2(val: any) {
    //     this.selectKeyExcludeRight = [];
    //     val.forEach((ele) => {
    //         this.selectKeyExcludeRight.push(ele.groupCode);
    //     });
    // }

    // 左边数据放到右边
    handleMoveToData(type) {
        if (type === 'LTCR') {
            if (this.selectKeyLeft.length === 0) {
                return;
            }
            let value = this.dataSourceLeft.filter(item => this.selectKeyLeft.includes(item.groupCode));
            this.dataSourceLeft = this.dataSourceLeft.filter(item => !this.selectKeyLeft.includes(item.groupCode));
            this.dataSourceCalculateRight = value.concat(this.dataSourceCalculateRight);

            this.selectKeyLeft = [];
        } else if (type === 'CRTL') {
            if (this.selectKeyCalculateRight.length === 0) {
                return;
            }
            let value = this.dataSourceCalculateRight.filter(item => this.selectKeyCalculateRight.includes(item.groupCode));
            this.dataSourceCalculateRight = this.dataSourceCalculateRight.filter(item => !this.selectKeyCalculateRight.includes(item.groupCode));
            this.dataSourceLeft = value.concat(this.dataSourceLeft);
            this.selectKeyCalculateRight = [];
        } else if (type === 'LTER') {
            if (this.selectKeyLeft.length === 0) {
                return;
            }
            let value = this.dataSourceLeft.filter(item => this.selectKeyLeft.includes(item.groupCode));
            this.dataSourceLeft = this.dataSourceLeft.filter(item => !this.selectKeyLeft.includes(item.groupCode));
            this.dataSourceExcludeRight = value.concat(this.dataSourceExcludeRight);
            this.selectKeyLeft = [];
        } else if (type === 'ERTL') {
            if (this.selectKeyExcludeRight.length === 0) {
                return;
            }
            let value = this.dataSourceExcludeRight.filter(item => this.selectKeyExcludeRight.includes(item.groupCode));
            this.dataSourceExcludeRight = this.dataSourceExcludeRight.filter(item => !this.selectKeyExcludeRight.includes(item.groupCode));
            this.dataSourceLeft = value.concat(this.dataSourceLeft);
            this.selectKeyExcludeRight = [];
        }
    }

    handleEntrySubmit() {
        let dataSourceCalculateRight = this.dataSourceCalculateRight;
        let dataSourceExcludeRight = this.dataSourceExcludeRight;
        let dataParam = dataSourceCalculateRight
            .map(item => {
                return { groupCode: item.groupCode, instGroupType: '1' };
            })
            .concat(
                dataSourceExcludeRight.map(item => {
                    return { groupCode: item.groupCode, instGroupType: '2' };
                })
            );

        this.$axios.post('/entry/group/user/select/insert/' + this.resourceCode || '2', dataParam).then(res => {
            // this.transDialog = false;
            this.$emit('closeEntryDialog');
            this.yh_message_success('保存成功');
            this.getUserSelectEntryGroupList();
        });
    }

    // 勾选
    handleSelectionChange(selectedRowKeys: any, type: string) {
        let keys = XEUtils.map(selectedRowKeys, item => item.groupCode);
        if (type === 'rowSelectionLeft') {
            this.selectKeyLeft = keys;
        } else if (type === 'rowSelectionCalculateRight') {
            this.selectKeyCalculateRight = keys;
        } else {
            this.selectKeyExcludeRight = keys;
        }
    }

    closeDialog() {
        this.$emit('closeEntryDialog');
    }
}
</script>
<style lang="scss" scoped>
/deep/.el-dialog .el-dialog__body {
    max-height: 70vh !important;
}
.el-col-2 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 400px;
    .el-button {
        margin-bottom: 5px;
    }
}
</style>
